<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html lang="en">
<head>
<meta charset="UTF-8">
<title>科普中国用户登录</title>

<!--图标样式-->
<link rel='stylesheet'
	href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
<link rel="stylesheet" href="css/layui.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/myLayui.css">

</head>

<body>
	<div class="return">
		<a href="index"><img src="picture/return.png" /></a>
	</div>
	<div class="container" id="container">
		<div class="form-container sign-up-container">
			<form id="form" action="register" method="post">
				<h1>注册</h1>
				<!--<div class="social-container">
				<a href="#" class="social"><i class="fab fa-facebook-f"></i></a>
				<a href="#" class="social"><i class="fab fa-google-plus-g"></i></a>
				<a href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
			</div>
			<span>第三方账号注册</span>-->
				<input type="text" name="userName" id="userName" required="required" placeholder="用户名" /> 
				<input type="password" name="userPwd1" id="userPwd1" required="required" placeholder="密码" /> 
				<input type="password" name="userPwd2" id="userPwd2" required="required" placeholder="确认密码" />
				<div class="sex">
					<input type="radio" name="sex" value="男" title="男" checked="checked" />男
				    <input type="radio" name="sex" value="女" title="女" />女
				</div>
				<input type="text" name="userTel" id="userTel" required="required" placeholder="手机号" /> 
				<input id="reg" type="submit" value="注册" />
				<!-- <button>注册</button> -->
			</form>
		</div>
		<div class="form-container sign-in-container">
			<form action="login" method="post">
				<h1>登录</h1>
				<div class="social-container">
					<a href="#" class="social"><i class="fab fa-facebook-f"></i></a> <a
						href="#" class="social"><i class="fab fa-google-plus-g"></i></a> <a
						href="#" class="social"><i class="fab fa-linkedin-in"></i></a>
				</div>
				<span>第三方账号登录</span> 
				<input type="text" name="userName" id="userName" required="required" placeholder="用户名" /> 
				<input type="password" name="userPwd" id="userPwd" required="required" placeholder="密码" /> 
				<a href="#">忘记密码？</a> 
				<input id="submit" type="submit" value="登入" />
				<!-- <button>登录</button> -->
			</form>
		</div>
		<div class="overlay-container">
			<div class="overlay">
				<div class="overlay-panel overlay-left">
					<h1>欢迎回来！</h1>
					<p>请您先登录的个人信息，进行操作。</p>
					<button class="ghost" id="signIn">登录</button>
				</div>
				<div class="overlay-panel overlay-right">
					<h1>你好朋友！</h1>
					<p>输入您的个人信息注册成为用户。</p>
					<button class="ghost" id="signUp">注册</button>
				</div>
			</div>
		</div>
	</div>

	<footer>
	<p>版权声明</p>
	</footer>



	<script src="js/index.js"></script>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
	<script src="layui/layui.js"></script>
	<script>
		//Demo
		$(function() {	
			//监听提交
			$("#reg").click(function(data) {
				var name=$("#userName").val
				console.log(name)
				//提交表单信息给控制器
				$.ajax({
					type : "post",
					url : "register",
					contentType : "application/json",
					data : "name="+name+"pwd="+pwd,
					success : function(msg) {
						//提示
						layer.msg(msg == "true" ? "操作成功!" : "操作失败", {
							icon : 1
						}, function() {

							//关闭层，刷新页面
							parent.layer.closeAll();

							//刷新页面
							window.location.reload();

						});
					}
				});
				layer.msg(JSON.stringify(data.field));
				return false;
			});
		});
	</script>



</body>

   <!-- 评论成功提示 -->
	<% if(request.getAttribute("defeat")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('登入失败，密码错误！');
		});  

	</script>
 <% 
  }%>
  
     <!-- 注册失败提示 -->
	<% if(request.getAttribute("defeat1")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('注册成功！');
		});  

	</script>
 <% 
  }%>
  
       <!-- 注册失败提示 -->
	<% if(request.getAttribute("defeat2")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('注册失败，两次密码不一致！');
		});  

	</script>
 <% 
  }%>
  
         <!-- 注册失败提示 -->
	<% if(request.getAttribute("defeat3")!=null){
	  %>
	  <script type="text/javascript">
	  layui.use('layer', function(){
		  var layer = layui.layer;
		  layer.msg('注册失败，此账号已被注册！');
		});  

	</script>
 <% 
  }%>
</html>
